<template>
    <page-main title-icon="dashboard" :title="`详细情况-${staffName}`">
        <template slot="title-left">
            <el-button type="primary" icon="el-icon-back" size="mini" @click="$router.back()">返回上一页</el-button>
        </template>

        <el-row :gutter="20">
            <el-col :md="11">
                <el-card shadow="never" header="日常汇报" style="margin-bottom: 16px;" />
                <el-card shadow="never" header="实习成果" style="margin-bottom: 16px;" />
                <el-card shadow="never" header="实习作品" style="margin-bottom: 16px;" />
            </el-col>
            <el-col :md="13">
                <el-card header="详细内容" shadow="hover">
                    <div class="doc">
                        <div ref="preview" />
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </page-main>
</template>

<script>
import PageMain from '@/components/PageMain'

const docx = require('docx-preview')
export default {
    name: 'StaffDetail',
    components: {PageMain},
    props: {
        file: {
            type: null
        }
    },
    data() {
        return {
            staffName: ''
        }
    },
    watch: {
        file: {
            handler(n, o) {
                if (n) {
                    this.setPreview()
                }
            },
            deep: true
        }
    },
    mounted() {
        this.staffName = this.$route.query.name
    },
    methods: {
        setPreview() {
            docx.renderAsync(this.file, this.$refs.preview)
        }
    }
}
</script>

<style scoped>
.doc {
    height: 500px;
    overflow-x: auto;
}
</style>
